<template>
  <div>
    <el-row>
      <!-- <el-col :span="6">
        <el-form-item label="病患姓名">
          <el-input
            v-model="search.name"
            placeholder="请输入病患姓名"
            clearable
          />
        </el-form-item>
      </el-col> -->
      <el-col :span="6" :offset="2">
        <el-form-item>
          <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
          <el-button type="primary" @click="add">新增病患</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
        >
          <el-table-column
            prop="id"
            label="ID"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="病患姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="address"
            label="现住址"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="内容"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column> -->

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                v-if="scope.row.hasIllnessMessage == true"
                style="color: rgb(6, 187, 6)"
                link
                type="primary"
                size="small"
                @click="
                  info(scope.row);
                  dialogVisible_binghuan = true;
                  xiugai_type = false;
                  type = true;
                "
                >查看病患档案</el-button
              >
              <el-button
                v-if="scope.row.hasIllnessMessage == true"
                link
                type="primary"
                size="small"
                @click="
                  info(scope.row);
                  dialogVisible_binghuan = true;
                  type = false;
                  xiugai_type = true;
                "
                >修改档案</el-button
              >
              <el-button
                v-if="scope.row.hasIllnessMessage == true"
                style="color: red"
                link
                type="primary"
                size="small"
                @click="del(scope.row)"
                >删除档案</el-button
              >

              <el-button
                v-else
                link
                type="primary"
                size="small"
                @click="
                  info(scope.row);
                  dialogVisible_binghuan = true;
                  type = false;
                  xiugai_type = false;
                "
                >填写病患档案</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增病患 -->
    <el-dialog v-model="dialogVisible" title="新增病患信息" width="20%">
      <el-form :model="Info">
        <el-row class="SearchRow" style="position: relative">
          <el-col>
            <el-form-item label="病患姓名">
              <el-input v-model="Info.name" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="Info.sex" />
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="Info.age" type="number" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="Info.phone" type="number" />
            </el-form-item>
            <el-form-item label="病因">
              <el-input v-model="Info.content" type="textarea" />
            </el-form-item>
            <el-button
              style="float: right"
              type="primary"
              size="small"
              @click="onSubmit()"
              >提交</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 病患档案 -->
    <el-dialog v-model="dialogVisible_binghuan" title="病患信息表" width="60%">
      <el-form :model="binghuan_Info">
        <el-row class="SearchRow" style="position: relative">
          <el-col>
            <div style="display: flex">
              <el-form-item label="病患编号">
                <el-input v-model="binghuan_Info.illnessno" />
              </el-form-item>
              <el-form-item label="患者手机号" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.illnessphone" />
              </el-form-item>
              <el-form-item label="监护人手机号" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.familyphone" />
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="监护人姓名">
                <el-input v-model="binghuan_Info.jianhuname" />
              </el-form-item>
              <el-form-item label="监护人关系" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.guanxi" />
              </el-form-item>
              <el-form-item label="居住地址" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.juzhudi" type="textarea" />
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="诊断信息">
                <el-input v-model="binghuan_Info.diagnose" type="textarea" />
              </el-form-item>
              <el-form-item label="症状阴性/阳性" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.property" />
              </el-form-item>
              <el-form-item label="病历单" style="margin-left: 20px">
                <el-input v-model="binghuan_Info.medicalrecord" />
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="出院时间">
                <!-- <el-input v-model="binghuan_Info.leavetime" /> -->
                <el-date-picker
                  v-model="binghuan_Info.leavetime"
                  placeholder="请选择日期"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="责任医生" style="margin-left: 20px">
                <el-input
                  v-model="binghuan_Info.doctor"
                  style="margin-left: 20px"
                />
              </el-form-item>
              <el-form-item label="用药信息" style="margin-left: 20px">
                <el-input
                  v-model="binghuan_Info.drugmessage"
                  type="textarea"
                  style="margin-left: 20px"
                />
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="创建医院" v-if="xiugai_type == false">
                <el-input v-model="binghuan_Info.createdoctor" />
              </el-form-item>
              <el-form-item
                label="修改人"
                style="margin-left: 20px"
                v-if="type == false && xiugai_type == true"
              >
                <el-input v-model="binghuan_Info.updateby" />
              </el-form-item>
              <el-form-item
                label="修改时间"
                style="margin-left: 20px"
                v-if="type == true && xiugai_type == false"
              >
                <el-input v-model="binghuan_Info.updatetime" disabled />
              </el-form-item>
              <el-form-item
                label="修改医院"
                style="margin-left: 20px"
                v-if="type == false && xiugai_type == true"
              >
                <el-input v-model="binghuan_Info.updatedoctor" />
              </el-form-item>
            </div>

            <el-form-item label="备注">
              <el-input v-model="binghuan_Info.remark" type="textarea" />
            </el-form-item>
            <el-button
              v-if="type == false"
              style="float: right"
              type="primary"
              size="small"
              @click="info_ret()"
              >提交</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import { http } from "@/utils/http";
import {
  WebInsertUser,
  PaginFindDeagnosticLogout,
  GetAllUsersByPaging,
  FindIllnessMessageDetail,
  UpdateIllnessMessage,
  AddIllnessMessage,
  DeleteIllnessMessage
} from "@/api/api";
import { setToken, getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
defineOptions({
  name: "Binghuanxinxi"
});

const Data = ref([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数

const dialogVisible = ref(false);
const dialogVisible_binghuan = ref(false);

//新增用户信息
const Info = reactive({
  name: "",
  sex: "",
  age: "",
  content: "",
  phone: ""
});
const add = () => {
  dialogVisible.value = true;
};
const onSubmit = () => {
  //
  const data = ref({
    token: getToken().accessToken,
    body: {
      name: Info.name,
      roleId: 5,
      sex: Info.sex,
      age: Info.age,
      content: Info.content,
      Phone: Info.phone
    }
  });
  WebInsertUser(data.value)
    .then((res: any) => {
      console.log(res);
      if (res.code == 200) {
        message("新增病患成功", { type: "success" });
        dialogVisible.value = false;
        GetList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 分页查询
const GetList = () => {
  Data.value = [];
  const data = ref({
    token: getToken().accessToken,
    body: {
      pageNumber: currentPage.value,
      pageSize: pageSize.value
    }
  });
  GetAllUsersByPaging(data.value)
    .then((res: any) => {
      console.log("查询所有用户返回", res);
      if (res.code == 200) {
        Data.value.push(...res.data.users);
        Total.value = res.data.totalRecords;
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};

// 查看详情
const type = ref(false);
const binghuan_Info = ref({
  illnessno: "", //患者编号
  illnessphone: "", //患者手机号
  familyphone: "", //监护人手机号
  property: "", //症状阴性/阳性
  medicalrecord: "", //病历单
  leavetime: "", //出院时间
  doctor: "", //责任医生
  drugmessage: "", //用药信息
  createdoctor: "", //创建医院
  updateby: "", //修改人
  updatetime: "", //修改时间
  updatedoctor: "", //修改医生
  remark: "", //备注
  diagnose: "", //诊断信息
  jianhuname: "", //监护人名字
  guanxi: "", //监护人关系
  juzhudi: "" //居住地址
});
const info = row => {
  now_id.value = row.id;
  const data = ref({
    token: getToken().accessToken,
    body: {
      id: row.id
    }
  });
  FindIllnessMessageDetail(data.value)
    .then((res: any) => {
      if (res.code == 200) {
        // console.log(res);
        biaodan_id.value = res.data.id;
        binghuan_Info.value.illnessno = res.data.illnessNo;
        binghuan_Info.value.illnessphone = res.data.illnessPhone;
        binghuan_Info.value.familyphone = res.data.familyPhone;
        binghuan_Info.value.property = res.data.property;
        binghuan_Info.value.medicalrecord = res.data.medicalRecord;
        binghuan_Info.value.leavetime = res.data.leaveTime;
        binghuan_Info.value.doctor = res.data.doctor;
        binghuan_Info.value.drugmessage = res.data.drugMessage;
        binghuan_Info.value.createdoctor = res.data.createDoctor;
        binghuan_Info.value.updateby = res.data.updateBy;
        binghuan_Info.value.updatetime = res.data.updateTime;
        binghuan_Info.value.updatedoctor = res.data.updateDoctor;
        binghuan_Info.value.remark = res.data.remark;
        binghuan_Info.value.diagnose = res.data.diagnose;
        console.log("表单", binghuan_Info.value);
      }
    })
    .catch(err => {
      console.log(err);
    });
};

//新增修改病患档案
const xiugai_type = ref(false);
const biaodan_id = ref("");
const now_id = ref("");
const info_ret = () => {
  if (xiugai_type.value == false) {
    //新增
    console.log("新增");
    const data = ref({
      token: getToken().accessToken,
      body: {
        userid: now_id.value,
        id: biaodan_id.value,
        illnessno: binghuan_Info.value.illnessno,
        illnessphone: binghuan_Info.value.illnessphone,
        familyphone: binghuan_Info.value.familyphone,
        property: binghuan_Info.value.property,
        medicalrecord: binghuan_Info.value.medicalrecord,
        leavetime: binghuan_Info.value.leavetime,
        doctor: binghuan_Info.value.doctor,
        drugmessage: binghuan_Info.value.drugmessage,
        createdoctor: binghuan_Info.value.createdoctor,
        updatedoctor: binghuan_Info.value.updatedoctor,
        remark: binghuan_Info.value.remark,
        diagnose: binghuan_Info.value.diagnose
      }
    });
    AddIllnessMessage(data.value).then((res: any) => {
      console.log(res);
      if (res.code == 200) {
        GetList();
        message("新增病患表成功", { type: "success" });
        dialogVisible_binghuan.value = false;
      }
    });
  } else {
    //修改
    console.log("修改");
    const data = ref({
      token: getToken().accessToken,
      body: {
        userid: now_id.value,
        id: biaodan_id.value,
        illnessno: binghuan_Info.value.illnessno,
        illnessphone: binghuan_Info.value.illnessphone,
        familyphone: binghuan_Info.value.familyphone,
        property: binghuan_Info.value.property,
        medicalrecord: binghuan_Info.value.medicalrecord,
        leavetime: binghuan_Info.value.leavetime,
        doctor: binghuan_Info.value.doctor,
        drugmessage: binghuan_Info.value.drugmessage,
        createdoctor: binghuan_Info.value.createdoctor,
        updatedoctor: binghuan_Info.value.updatedoctor,
        remark: binghuan_Info.value.remark,
        diagnose: binghuan_Info.value.diagnose
      }
    });
    UpdateIllnessMessage(data.value)
      .then((res: any) => {
        console.log(res);
        if (res.code == 200) {
          GetList();
          message("修改病患表成功", { type: "success" });
          dialogVisible_binghuan.value = false;
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
};
//删除病患档案
const del = row => {
  console.log(row);
  ElMessageBox.confirm("确认删除该病患档案?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      const data = ref({
        token: getToken().accessToken,
        body: {
          id: row.id
        }
      });
      DeleteIllnessMessage(data.value)
        .then((res: any) => {
          if (res.code == 200) {
            console.log(res);
            GetList();
            ElMessage({
              type: "success",
              message: "删除成功"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

onMounted(() => {
  GetList();
});
</script>

<style lang="scss" scoped></style>
